<template>
    <div class="main">
        <div style="width: calc(100% - 20px); height: 100%; margin: 0 auto; position: relative;">
            <div style="height: 60px;">
                <div style="width: 300px; float: left; height: 50px;" >
                    <hu-select-dict v-model="datasourceId" :selectDic="datasorceList" title="数据源" search/>
                </div>
                <div style="width: 300px; float: left;" >
                    <hu-input v-model="tableName" title="表名称"/>
                </div>
                <div class="top-button"> 
                    <hu-button @click="catchInfo()" value="获取" size="big"/>
                </div>
            </div>
            
            <hu-table 
                ref="table" 
                v-model="tIndex" 
                :tableInfo="tableInfo" 
                :checkbox=false 
                height-reduce="60px"
                option-width="160">
                <hu-button @click="view()" value="详情" size="mini" />&nbsp;
                <hu-button @click="ddl()" value="获取DDL" size="mini" />&nbsp;
            </hu-table>
            <hu-dialog title="详情" top="10%" ref="viewDialogOpen" width="60vw" @hu-dialog="viewResultDialog" onlyClose>
                <hu-input readOnly v-model="info.tableName" title="表名称" />
                <hu-input readOnly v-model="info.tableComment" title="表注释" />
                <hu-input readOnly v-model="info.tableType" title="表类型" />
                <hu-input readOnly v-model="info.tableCollation" title="排序规则" />
                <hu-input readOnly v-model="info.engine" title="引擎类型" />
                <hu-input readOnly v-model="info.dataLength" title="数据长度" />
                <hu-input readOnly v-model="info.maxDataLength" title="最大数据长度" />
                <hu-input readOnly v-model="info.indexLength" title="索引长度" />
                <hu-input readOnly v-model="info.autoIncrement" title="自增" />
                <hu-input readOnly v-model="info.createTime" title="创建时间" />
                <hu-input readOnly v-model="info.updateTime" title="更新时间" />
            </hu-dialog>
            <hu-dialog top="20%" ref="ddlDialogOpen" width="60vw" @hu-dialog="ddlResultDialog" onlyClose>
                <div style="height: 55vh;margin-bottom: 7px;">
                    <hu-editor v-model="ddlValue" :mode="editorMode" autoFormat readOnly></hu-editor>
                </div>
            </hu-dialog>
        </div>
        <div v-if="loading" style="width: 100%;height: 150px; position: relative;">
            <hu-loading type="circular" />
        </div>
    </div>
</template>
<script>
import "@/assets/styles/base.scss"
import { selectDataSourceList } from '@/api/datasource'
import { selectBaseInfoList, getDDL } from '@/api/base'
import { isEmpty } from '@/utils/validate'
export default {
    name: '基本信息',
    components: {

    },
    mixins: [],
    props: [

    ],
    data() {
        return {
            dllKey: new Date().getTime(),
            ddlValue: null,
            editorMode: 'sql',
            datasourceId: null,
            tableName: null,
            loading: true,
            tIndex: [],
            info: {
                tableCatalog: null,
                tableSchema: null,
                tableName: null,
                tableType: null,
                engine:null,
                rowFormat:null,
                tableRows:null,
                avgRowLength:null,
                dataLength:null,
                maxDataLength:null,
                indexLength:null,
                dataFree:null,
                autoIncrement:null,
                createTime: null,
                updateTime: null,
                checkTime: null,
                tableCollation: null,
                checksum: null,
                createOptions: null,
                tableComment: null
            },
            tableInfo: {
                title: [
                    {
                        value: 'tableSchema',
                        label: '库名',
                        width: '180'
                    }, {
                        value: 'tableName',
                        label: '表名',
                        width: '210'
                    }, {
                        value: 'tableType',
                        label: '表类型',
                        width: '100'
                    }, {
                        value: 'tableComment',
                        label: '表注释',
                        width: '240'
                    },
                ],
                value: []
            },
            datasorceList: []
        }
    },
    computed: {

    },
    created() {
        
    },
    mounted() {
        this.selectDataSourceList();
        this.selectList()
    },
    watch: {

    },
    methods: {
        selectDataSourceList() {
            selectDataSourceList().then((res) => {
                let list = res.data.data
                let arr = []
                for(let item of list) {
                    let obj = {
                        value: item.id,
                        label: item.name
                    }
                    arr.push(obj)
                }
                this.datasorceList = arr
            }).catch((error) => {
                this.$huTip({ type: "error", value: error })
            })
        },
        selectList() {
            this.loading = false
        },
        catchInfo() {
            if(this.datasourceId == null) {
                this.$huTip({ type: 'warning', value: "请选择数据源" })
            } else {
                this.loading = true
                selectBaseInfoList(this.datasourceId, this.tableName).then((res) => {
                    this.loading = false
                    this.tableInfo.value = res.data.data
                }).catch((error => {
                    this.loading = false
                    this.$huTip({ type: 'error', value: error })
                }))
            }
        },
        view() {
            this.init()
            this.$refs.viewDialogOpen.openDialog()
        },
        ddl() {
            if(isEmpty(this.datasourceId)) {
                this.$huTip({ type: 'warning', value: "请选择数据源" })
                return
            }
            let tableName = this.tableInfo.value[this.tIndex[0]].tableName
            let tableType = this.tableInfo.value[this.tIndex[0]].tableType
            getDDL(this.datasourceId, tableName, tableType).then((res) => {
                const info =  res.data.data
                this.ddlValue = info.createTableSQL
                this.dllKey = new Date().getTime(),
                this.$refs.ddlDialogOpen.title = `DDL(${info.tableName})`
                this.$refs.ddlDialogOpen.openDialog()
            }).catch((error) => {
                this.$huTip({ type: 'error', value: error })
            })
        },
        viewResultDialog(val) {
            if (!val) {
                console.log("取消")
            } else {
                console.log("确认")
            }
        },
        ddlResultDialog(val) {
            if (!val) {
                console.log("取消")
            } else {
                console.log("确认")
            }
        },
        init() {
            let selectItem = this.tableInfo.value[this.tIndex[0]]
            for (let key in this.info) {
                this.info[key] = selectItem[key]+""
            }
        }
    },
}
</script>
<style lang="scss" scoped>
.main {
    box-sizing: unset;
    position: relative;
}
.top-button{
    float: left;
    margin-top: 18px;
    margin-left: 10px;
}
</style>